Micron Document
<!DOCTYPE html>
<html class="client-nojs vector-feature-night-mode-disabled vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-sticky-header-enabled" lang="en" dir="ltr"><head>
<meta charset="UTF-8">
<title>CSS-in-JS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="canonical" href="https://en.wikipedia.org/wiki/CSS-in-JS"> <link href="./mw/ext.cite.styles.css" rel="stylesheet" type="text/css">
<link href="./mw/ext.pygments.css" rel="stylesheet" type="text/css">
<link href="./mw/skins.vector.icons.css" rel="stylesheet" type="text/css">
<link href="./mw/skins.vector.search.codex.styles.css" rel="stylesheet" type="text/css">
<link href="./mw/skins.vector.styles.css" rel="stylesheet" type="text/css">
<link href="./mw/user.styles.css" rel="stylesheet" type="text/css">
<meta name="ResourceLoaderDynamicStyles" content="">
<link rel="stylesheet" type="text/css" href="./mw/site.styles.css">
<link rel="stylesheet" type="text/css" href="./mw/noscript.css">
<link rel="stylesheet" type="text/css" href="./footer.css">
<link rel="stylesheet" type="text/css" href="./vector-2022.css">
</head>
<body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject page-CSS-in-JS rootpage-CSS-in-JS skin-vector-2022 action-view">
<div class="mw-page-container">
<div class="mw-page-container-inner">
<div class="mw-content-container">
<main id="content" class="mw-body">
<header class="mw-body-header vector-page-titlebar">
<h1 id="firstHeading" class="firstHeading mw-first-heading">
<span id="openzim-page-title" class="mw-page-title-main"><span class="mw-page-title-main">CSS-in-JS</span></span>
</h1>
</header>
<a id="top"></a>
<div id="bodyContent" class="vector-body ve-init-mw-desktopArticleTarget-targetContainer" aria-labelledby="firstHeading" data-mw-ve-target-container="">
<div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="en" dir="ltr"><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><style data-mw-deduplicate="TemplateStyles:r1305433154">
/* start https://en.wikipedia.org/ */


.mw-parser-output .ambox{border:1px solid #a2a9b1;border-left:10px solid #36c;background-color:#fbfbfb;box-sizing:border-box}.mw-parser-output .ambox+link+.ambox,.mw-parser-output .ambox+link+style+.ambox,.mw-parser-output .ambox+link+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+style+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+link+.ambox{margin-top:-1px}html body.mediawiki .mw-parser-output .ambox.mbox-small-left{margin:4px 1em 4px 0;overflow:hidden;width:238px;border-collapse:collapse;font-size:88%;line-height:1.25em}.mw-parser-output .ambox-speedy{border-left:10px solid #b32424;background-color:#fee7e6}.mw-parser-output .ambox-delete{border-left:10px solid #b32424}.mw-parser-output .ambox-content{border-left:10px solid #f28500}.mw-parser-output .ambox-style{border-left:10px solid #fc3}.mw-parser-output .ambox-move{border-left:10px solid #9932cc}.mw-parser-output .ambox-protection{border-left:10px solid #a2a9b1}.mw-parser-output .ambox .mbox-text{border:none;padding:0.25em 0.5em;width:100%}.mw-parser-output .ambox .mbox-image{border:none;padding:2px 0 2px 0.5em;text-align:center}.mw-parser-output .ambox .mbox-imageright{border:none;padding:2px 0.5em 2px 0;text-align:center}.mw-parser-output .ambox .mbox-empty-cell{border:none;padding:0;width:1px}.mw-parser-output .ambox .mbox-image-div{width:52px}@media(min-width:720px){.mw-parser-output .ambox{margin:0 10%}}@media print{body.ns-0 .mw-parser-output .ambox{display:none!important}}


/* end https://en.wikipedia.org/ */
</style>
<p><b>CSS-in-JS</b> is a styling technique by which <a href="JavaScript" title="JavaScript">JavaScript</a> is used to style components. When this JavaScript is parsed, <a href="Cascading_Style_Sheets" class="mw-redirect" title="Cascading Style Sheets">CSS</a> is generated (usually as a <code>&lt;style&gt;</code> element) and attached into the <a href="Document_Object_Model" title="Document Object Model">DOM</a>. It enables the abstraction of CSS to the component level itself, using JavaScript to describe styles in a declarative and maintainable way. There are multiple implementations of this concept in the form of libraries such as
</p>
<ul><li>Emotion<sup id="cite_ref-1" class="reference"><a href="#cite_note-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup></li>
<li>Styled Components<sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup></li>
<li>JSS<sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup></li>
<li><a href="Tailwind_CSS" title="Tailwind CSS">Tailwind CSS</a></li></ul>
<p>These libraries allow the creation of styled components using tagged template literals. For example, using styled components in a <a href="React_(JavaScript_library)" class="mw-redirect" title="React (JavaScript library)">React</a> project would look like the following:
</p>
<div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span class="k">import</span><span class="w"> </span><span class="nx">styled</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">'styled-components'</span><span class="p">;</span>
<span class="c1">// Create a component that renders a &lt;p&gt; element with blue text</span>
<span class="kd">const</span><span class="w"> </span><span class="nx">BlueText</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">styled</span><span class="p">.</span><span class="nx">p</span><span class="sb">`</span>
<span class="sb"> color: blue;</span>
<span class="sb">`</span><span class="p">;</span>

<span class="o">&lt;</span><span class="nx">BlueText</span><span class="o">&gt;</span><span class="nx">My</span><span class="w"> </span><span class="nx">blue</span><span class="w"> </span><span class="nx">text</span><span class="o">&lt;</span><span class="err">/BlueText&gt;</span>
</pre></div>
<p>Some outcomes that may be achieved through CSS-in-JS can not be obtained using traditional <a href="CSS" title="CSS">CSS</a> techniques. It is possible to make the styles dynamic in line with just a few conditional statements. Programmers may also write more modular code, with CSS being encapsulated in the same block as the programmer's JavaScript, scoping it to that module only.
</p>
<div class="mw-heading mw-heading2"><h2 id="Industry_use">Industry use</h2></div>
<p>CSS-in-JS is used by <a href="Reddit" title="Reddit">Reddit</a>, <a href="Patreon" title="Patreon">Patreon</a>, <a href="Target_Corporation" title="Target Corporation">Target</a>, <a href="Atlassian" title="Atlassian">Atlassian</a>, <a href="Vogue_(magazine)" title="Vogue (magazine)">Vogue</a>, <a href="GitHub" title="GitHub">GitHub</a> and <a href="Coinbase" title="Coinbase">Coinbase</a>.<sup id="cite_ref-4" class="reference"><a href="#cite_note-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup>
</p>
<div class="mw-heading mw-heading2"><h2 id="References">References</h2></div>
<style data-mw-deduplicate="TemplateStyles:r1239543626">
/* start https://en.wikipedia.org/ */


.mw-parser-output .reflist{margin-bottom:0.5em;list-style-type:decimal}@media screen{.mw-parser-output .reflist{font-size:90%}}.mw-parser-output .reflist .references{font-size:100%;margin-bottom:0;list-style-type:inherit}.mw-parser-output .reflist-columns-2{column-width:30em}.mw-parser-output .reflist-columns-3{column-width:25em}.mw-parser-output .reflist-columns{margin-top:0.3em}.mw-parser-output .reflist-columns ol{margin-top:0}.mw-parser-output .reflist-columns li{page-break-inside:avoid;break-inside:avoid-column}.mw-parser-output .reflist-upper-alpha{list-style-type:upper-alpha}.mw-parser-output .reflist-upper-roman{list-style-type:upper-roman}.mw-parser-output .reflist-lower-alpha{list-style-type:lower-alpha}.mw-parser-output .reflist-lower-greek{list-style-type:lower-greek}.mw-parser-output .reflist-lower-roman{list-style-type:lower-roman}


/* end https://en.wikipedia.org/ */
</style><div class="reflist">
<div class="mw-references-wrap"><ol class="references">
<li id="cite_note-1"><span class="mw-cite-backlink"><b><a href="#cite_ref-1">^</a></b></span> <span class="reference-text"><style data-mw-deduplicate="TemplateStyles:r1238218222">
/* start https://en.wikipedia.org/ */


.mw-parser-output cite.citation{font-style:inherit;word-wrap:break-word}.mw-parser-output .citation q{quotes:"\"""\"""'""'"}.mw-parser-output .citation:target{background-color:rgba(0,127,255,0.133)}.mw-parser-output .id-lock-free.id-lock-free a{background:url("./mw/Lock-green.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-limited.id-lock-limited a,.mw-parser-output .id-lock-registration.id-lock-registration a{background:url("./mw/Lock-gray-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-subscription.id-lock-subscription a{background:url("./mw/Lock-red-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .cs1-ws-icon a{background:url("./mw/Wikisource-logo.svg")right 0.1em center/12px no-repeat}body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-free a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-limited a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-registration a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-subscription a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .cs1-ws-icon a{background-size:contain;padding:0 1em 0 0}.mw-parser-output .cs1-code{color:inherit;background:inherit;border:none;padding:inherit}.mw-parser-output .cs1-hidden-error{display:none;color:var(--color-error,#d33)}.mw-parser-output .cs1-visible-error{color:var(--color-error,#d33)}.mw-parser-output .cs1-maint{display:none;color:#085;margin-left:0.3em}.mw-parser-output .cs1-kern-left{padding-left:0.2em}.mw-parser-output .cs1-kern-right{padding-right:0.2em}.mw-parser-output .citation .mw-selflink{font-weight:inherit}@media screen{.mw-parser-output .cs1-format{font-size:95%}html.skin-theme-clientpref-night .mw-parser-output .cs1-maint{color:#18911f}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .cs1-maint{color:#18911f}}


/* end https://en.wikipedia.org/ */
</style><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://emotion.sh/docs/introduction">"Emotion - Introduction"</a>. <i>emotion.sh</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2019-07-03</span></span>.</cite></span>
</li>
<li id="cite_note-2"><span class="mw-cite-backlink"><b><a href="#cite_ref-2">^</a></b></span> <span class="reference-text"><cite id="CITEREFstyled-components" class="citation web cs1">styled-components. <a rel="nofollow" class="external text" href="https://www.styled-components.com/">"styled-components"</a>. <i>styled-components</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2019-07-03</span></span>.</cite></span>
</li>
<li id="cite_note-3"><span class="mw-cite-backlink"><b><a href="#cite_ref-3">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://cssinjs.org/">"JSS"</a>. <i>cssinjs.org</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2019-07-03</span></span>.</cite></span>
</li>
<li id="cite_note-4"><span class="mw-cite-backlink"><b><a href="#cite_ref-4">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.alibabacloud.com/blog/a-detailed-explanation-of-css-in-js_598842">"A Detailed Explanation of CSS-in-JS"</a>. <i>Alibaba Cloud Community</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2023-07-05</span></span>.</cite></span>
</li>
</ol></div></div>
<div class="navbox-styles"><style data-mw-deduplicate="TemplateStyles:r1129693374">
/* start https://en.wikipedia.org/ */


.mw-parser-output .hlist dl,.mw-parser-output .hlist ol,.mw-parser-output .hlist ul{margin:0;padding:0}.mw-parser-output .hlist dd,.mw-parser-output .hlist dt,.mw-parser-output .hlist li{margin:0;display:inline}.mw-parser-output .hlist.inline,.mw-parser-output .hlist.inline dl,.mw-parser-output .hlist.inline ol,.mw-parser-output .hlist.inline ul,.mw-parser-output .hlist dl dl,.mw-parser-output .hlist dl ol,.mw-parser-output .hlist dl ul,.mw-parser-output .hlist ol dl,.mw-parser-output .hlist ol ol,.mw-parser-output .hlist ol ul,.mw-parser-output .hlist ul dl,.mw-parser-output .hlist ul ol,.mw-parser-output .hlist ul ul{display:inline}.mw-parser-output .hlist .mw-empty-li{display:none}.mw-parser-output .hlist dt::after{content:": "}.mw-parser-output .hlist dd::after,.mw-parser-output .hlist li::after{content:" ยท ";font-weight:bold}.mw-parser-output .hlist dd:last-child::after,.mw-parser-output .hlist dt:last-child::after,.mw-parser-output .hlist li:last-child::after{content:none}.mw-parser-output .hlist dd dd:first-child::before,.mw-parser-output .hlist dd dt:first-child::before,.mw-parser-output .hlist dd li:first-child::before,.mw-parser-output .hlist dt dd:first-child::before,.mw-parser-output .hlist dt dt:first-child::before,.mw-parser-output .hlist dt li:first-child::before,.mw-parser-output .hlist li dd:first-child::before,.mw-parser-output .hlist li dt:first-child::before,.mw-parser-output .hlist li li:first-child::before{content:" (";font-weight:normal}.mw-parser-output .hlist dd dd:last-child::after,.mw-parser-output .hlist dd dt:last-child::after,.mw-parser-output .hlist dd li:last-child::after,.mw-parser-output .hlist dt dd:last-child::after,.mw-parser-output .hlist dt dt:last-child::after,.mw-parser-output .hlist dt li:last-child::after,.mw-parser-output .hlist li dd:last-child::after,.mw-parser-output .hlist li dt:last-child::after,.mw-parser-output .hlist li li:last-child::after{content:")";font-weight:normal}.mw-parser-output .hlist ol{counter-reset:listitem}.mw-parser-output .hlist ol>li{counter-increment:listitem}.mw-parser-output .hlist ol>li::before{content:" "counter(listitem)"\a0 "}.mw-parser-output .hlist dd ol>li:first-child::before,.mw-parser-output .hlist dt ol>li:first-child::before,.mw-parser-output .hlist li ol>li:first-child::before{content:" ("counter(listitem)"\a0 "}


/* end https://en.wikipedia.org/ */
</style><style data-mw-deduplicate="TemplateStyles:r1236075235">
/* start https://en.wikipedia.org/ */


.mw-parser-output .navbox{box-sizing:border-box;border:1px solid #a2a9b1;width:100%;clear:both;font-size:88%;text-align:center;padding:1px;margin:1em auto 0}.mw-parser-output .navbox .navbox{margin-top:0}.mw-parser-output .navbox+.navbox,.mw-parser-output .navbox+.navbox-styles+.navbox{margin-top:-1px}.mw-parser-output .navbox-inner,.mw-parser-output .navbox-subgroup{width:100%}.mw-parser-output .navbox-group,.mw-parser-output .navbox-title,.mw-parser-output .navbox-abovebelow{padding:0.25em 1em;line-height:1.5em;text-align:center}.mw-parser-output .navbox-group{white-space:nowrap;text-align:right}.mw-parser-output .navbox,.mw-parser-output .navbox-subgroup{background-color:#fdfdfd}.mw-parser-output .navbox-list{line-height:1.5em;border-color:#fdfdfd}.mw-parser-output .navbox-list-with-group{text-align:left;border-left-width:2px;border-left-style:solid}.mw-parser-output tr+tr>.navbox-abovebelow,.mw-parser-output tr+tr>.navbox-group,.mw-parser-output tr+tr>.navbox-image,.mw-parser-output tr+tr>.navbox-list{border-top:2px solid #fdfdfd}.mw-parser-output .navbox-title{background-color:#ccf}.mw-parser-output .navbox-abovebelow,.mw-parser-output .navbox-group,.mw-parser-output .navbox-subgroup .navbox-title{background-color:#ddf}.mw-parser-output .navbox-subgroup .navbox-group,.mw-parser-output .navbox-subgroup .navbox-abovebelow{background-color:#e6e6ff}.mw-parser-output .navbox-even{background-color:#f7f7f7}.mw-parser-output .navbox-odd{background-color:transparent}.mw-parser-output .navbox .hlist td dl,.mw-parser-output .navbox .hlist td ol,.mw-parser-output .navbox .hlist td ul,.mw-parser-output .navbox td.hlist dl,.mw-parser-output .navbox td.hlist ol,.mw-parser-output .navbox td.hlist ul{padding:0.125em 0}.mw-parser-output .navbox .navbar{display:block;font-size:100%}.mw-parser-output .navbox-title .navbar{float:left;text-align:left;margin-right:0.5em}body.skin--responsive .mw-parser-output .navbox-image img{max-width:none!important}@media print{body.ns-0 .mw-parser-output .navbox{display:none!important}}


/* end https://en.wikipedia.org/ */
</style></div><div role="navigation" class="navbox" aria-labelledby="JavaScript497" style="padding:3px"><table class="nowraplinks mw-collapsible autocollapse navbox-inner" style="border-spacing:0;background:transparent;color:inherit"><tbody><tr><th scope="col" class="navbox-title" colspan="2"><style data-mw-deduplicate="TemplateStyles:r1239400231">
/* start https://en.wikipedia.org/ */


.mw-parser-output .navbar{display:inline;font-size:88%;font-weight:normal}.mw-parser-output .navbar-collapse{float:left;text-align:left}.mw-parser-output .navbar-boxtext{word-spacing:0}.mw-parser-output .navbar ul{display:inline-block;white-space:nowrap;line-height:inherit}.mw-parser-output .navbar-brackets::before{margin-right:-0.125em;content:"[ "}.mw-parser-output .navbar-brackets::after{margin-left:-0.125em;content:" ]"}.mw-parser-output .navbar li{word-spacing:-0.125em}.mw-parser-output .navbar a>span,.mw-parser-output .navbar a>abbr{text-decoration:inherit}.mw-parser-output .navbar-mini abbr{font-variant:small-caps;border-bottom:none;text-decoration:none;cursor:inherit}.mw-parser-output .navbar-ct-full{font-size:114%;margin:0 7em}.mw-parser-output .navbar-ct-mini{font-size:114%;margin:0 4em}html.skin-theme-clientpref-night .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}@media(prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}}@media print{.mw-parser-output .navbar{display:none!important}}


/* end https://en.wikipedia.org/ */
</style><div id="JavaScript497" style="font-size:114%;margin:0 4em"><a href="JavaScript" title="JavaScript">JavaScript</a></div></th></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Static_program_analysis" title="Static program analysis">Code analysis</a></th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="ESLint" title="ESLint">ESLint</a></li>
<li><a href="JSHint" title="JSHint">JSHint</a></li>
<li><a href="JSLint" title="JSLint">JSLint</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Subset" title="Subset">Supersets</a></th><td class="navbox-list-with-group navbox-list navbox-even hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="ArkTS" title="ArkTS">ArkTS</a></li>
<li><a href="JS%2B%2B" title="JS++">JS++</a></li>
<li><a href="TypeScript" title="TypeScript">TypeScript</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Source-to-source_compiler" title="Source-to-source compiler">Transpilers</a></th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="AtScript" title="AtScript">AtScript</a></li>
<li><a href="Babel_(transcompiler)" title="Babel (transcompiler)">Babel</a></li>
<li><a href="ClojureScript" class="mw-redirect" title="ClojureScript">ClojureScript</a></li>
<li><a href="CoffeeScript" title="CoffeeScript">CoffeeScript</a></li>
<li><a href="Dart_(programming_language)" title="Dart (programming language)">Dart</a></li>
<li><a href="Elm_(programming_language)" title="Elm (programming language)">Elm</a></li>
<li><a href="Emscripten" title="Emscripten">Emscripten</a></li>
<li><a href="Google_Closure_Compiler" class="mw-redirect" title="Google Closure Compiler">Google Closure Compiler</a></li>
<li><a href="Google_Web_Toolkit" title="Google Web Toolkit">Google Web Toolkit</a></li>
<li><a href="Haxe" title="Haxe">Haxe</a></li>
<li><a href="LiveScript_(programming_language)" title="LiveScript (programming language)">LiveScript</a></li>
<li><a href="Morfik" title="Morfik">Morfik</a></li>
<li><a href="Nim_(programming_language)" title="Nim (programming language)">Nim</a></li>
<li><a href="Opa_(programming_language)" title="Opa (programming language)">Opa</a></li>
<li><a href="PureScript" title="PureScript">PureScript</a></li>
<li><a href="Reason_(programming_language)" title="Reason (programming language)">Reason</a></li>
<li><a href="WebSharper" title="WebSharper">WebSharper</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Concepts</th><td class="navbox-list-with-group navbox-list navbox-even hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="JavaScript_library" title="JavaScript library">JavaScript library</a></li>
<li><a href="JavaScript_syntax" title="JavaScript syntax">JavaScript syntax</a></li>
<li><a href="JavaScript_stack" title="JavaScript stack">JavaScript stack</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Debugger" title="Debugger">Debuggers</a></th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="Chrome_(browser)" class="mw-redirect" title="Chrome (browser)">Chrome DevTools</a></li>
<li><a href="Firefox" title="Firefox">Firefox</a> Inspector</li>
<li><a href="Komodo_IDE" title="Komodo IDE">Komodo IDE</a></li>
<li><a href="Safari_(web_browser)" title="Safari (web browser)">Safari</a> Web Inspector</li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Documentation_generator" title="Documentation generator">Documentation generators</a></th><td class="navbox-list-with-group navbox-list navbox-even hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="JSDoc" title="JSDoc">JSDoc</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Editors (<a href="Comparison_of_JavaScript-based_source_code_editors" title="Comparison of JavaScript-based source code editors">comparison</a>)</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="Ace_(editor)" title="Ace (editor)">Ace</a>
<ul><li><a href="Cloud9_IDE" title="Cloud9 IDE">Cloud9 IDE</a></li></ul></li>
<li><a href="Atom_(text_editor)" title="Atom (text editor)">Atom</a></li>
<li><a href="CodeMirror" title="CodeMirror">CodeMirror</a>
<ul><li><a href="Brackets_(text_editor)" title="Brackets (text editor)">Brackets</a></li>
<li><a href="Light_Table_(software)" title="Light Table (software)">Light Table</a></li></ul></li>
<li><a href="PhpStorm" class="mw-redirect" title="PhpStorm">PhpStorm</a></li>
<li><a href="List_of_Eclipse_projects#Top-level_sub-projects" title="List of Eclipse projects">Orion</a></li>
<li><a href="Visual_Studio" title="Visual Studio">Visual Studio</a>
<ul><li><a href="Microsoft_Visual_Studio_Express" title="Microsoft Visual Studio Express">Visual Studio Express</a></li></ul></li>
<li><a href="Visual_Studio_Code" title="Visual Studio Code">Visual Studio Code</a></li>
<li><a href="Visual_Studio#Azure_DevOps_Services" title="Visual Studio">Visual Studio Team Services</a></li>
<li><a href="Vim_(text_editor)" title="Vim (text editor)">Vim</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="JavaScript_engine" class="mw-redirect" title="JavaScript engine">Engines</a></th><td class="navbox-list-with-group navbox-list navbox-even hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="List_of_ECMAScript_engines" class="mw-redirect" title="List of ECMAScript engines">List of ECMAScript engines</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Software_framework" title="Software framework">Frameworks</a></th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="Comparison_of_JavaScript-based_web_frameworks" title="Comparison of JavaScript-based web frameworks">Comparison of JavaScript frameworks</a></li>
<li><a href="List_of_JavaScript_libraries" title="List of JavaScript libraries">List of JavaScript libraries</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Related <a href="Technology" title="Technology">technologies</a></th><td class="navbox-list-with-group navbox-list navbox-even hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="Ajax_(programming)" title="Ajax (programming)">Ajax</a></li>
<li><a href="AssemblyScript" title="AssemblyScript">AssemblyScript</a></li>
<li><a href="Asm.js" title="Asm.js">asm.js</a></li>
<li><a href="Cascading_Style_Sheets" class="mw-redirect" title="Cascading Style Sheets">Cascading Style Sheets</a></li>
<li><a href="Document_Object_Model" title="Document Object Model">Document Object Model</a></li>
<li><a href="HTML" title="HTML">HTML</a>
<ul><li><a href="HTML5" title="HTML5">HTML5</a></li></ul></li>
<li><a href="JSON" title="JSON">JSON</a></li>
<li><a href="WebAssembly" title="WebAssembly">WebAssembly</a></li>
<li><a href="WebAuthn" title="WebAuthn">WebAuthn</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Package_manager" title="Package manager">Package managers</a></th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="Npm" title="Npm">npm</a></li>
<li><a href="Pnpm" title="Pnpm">pnpm</a></li>
<li><a href="Yarn_(package_manager)" title="Yarn (package manager)">yarn</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Module bundlers</th><td class="navbox-list-with-group navbox-list navbox-even hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="Webpack" title="Webpack">Webpack</a></li>
<li><a href="Vite_(software)" title="Vite (software)">Vite</a></li>
<li><a href="Esbuild" title="Esbuild">esbuild</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Server-side_JavaScript" class="mw-redirect" title="Server-side JavaScript">Server-side</a></th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="Active_Server_Pages" title="Active Server Pages">Active Server Pages</a></li>
<li><a href="Bun_(software)" title="Bun (software)">Bun</a></li>
<li><a href="CommonJS" title="CommonJS">CommonJS</a></li>
<li><a href="Deno_(software)" title="Deno (software)">Deno</a></li>
<li><a href="JSGI" title="JSGI">JSGI</a></li>
<li><a href="Node.js" title="Node.js">Node.js</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Unit_testing" title="Unit testing">Unit testing</a> frameworks (<a href="List_of_unit_testing_frameworks#JavaScript" title="List of unit testing frameworks">list</a>)</th><td class="navbox-list-with-group navbox-list navbox-even hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="Jasmine_(software)" title="Jasmine (software)">Jasmine</a></li>
<li><a href="Mocha_(JavaScript_framework)" title="Mocha (JavaScript framework)">Mocha</a></li>
<li><a href="QUnit" title="QUnit">QUnit</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">People</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="Douglas_Crockford" title="Douglas Crockford">Douglas Crockford</a></li>
<li><a href="Ryan_Dahl" title="Ryan Dahl">Ryan Dahl</a></li>
<li><a href="Brendan_Eich" title="Brendan Eich">Brendan Eich</a></li>
<li><a href="John_Resig" title="John Resig">John Resig</a></li>
<li><a href="Jesse_James_Garrett" title="Jesse James Garrett">Jesse James Garrett</a></li></ul>
</div></td></tr></tbody></table></div></div><!--htdig_noindex--><div><div class="zim-footer">
This article is issued from <a class="external text" title="Last edited on 2023-07-05" href="https://en.wikipedia.org/wiki/?title=CSS-in-JS&amp;oldid=1163518769">Wikipedia</a>. The text is available under <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">Creative Commons Attribution-Share Alike 4.0</a> unless otherwise noted. Additional terms may apply for the media files.
</div>
</div><!--/htdig_noindex--></div>
</div>
</main>
</div>
</div>
</div>

</body></html>